<template>
	<div class="amap-wrapper">
	     <el-amap class="amap-box" 
					  :vid="'amap-vue'" 
					  :events="events"
					  :zoom="zoom"
					  :center="center"
					
					  >
					  <el-amap-marker class="selectedMarker" :amap-manager="amapManager"
					          v-for="(item, index) in position"
					          :key="index"
					          :position="item.position"
							  :content="markerImg+'<span class=\'shop_name\'>'+item.shop_name+'</span>'"
					          topWhenClick="true">
					        </el-amap-marker>
					  </el-amap>
	   </div>
</template>

<script>
	var _self;
	import { AMapManager } from 'vue-amap'
	let amapManager = new AMapManager()
	export default {
		data() {
		  return {
			  amapManager,
			  markerImg: '<img src="'+this.icon+'" style="width:40px;height:40px;"></img>',
			  events: {
			    click(e) {
			  		console.log(e)
					let positions=[e.lnglat.lng,e.lnglat.lat]
					_self.choose_position(positions)
					
			        }
			}
		  }
		},
		props: {
			zoom:'',
			icon:'',
			choose_position:Function,
			position:{
				type:Array
			},
			center:{
				type:Array
			}
		
		},
		mounted() {
			_self=this
		},
		 methods: {
		 }
	}
</script>

<style>
	.amap-wrapper {
	  width: 600px;
	  height: 400px;
	}
	.shop_name{
		font-weight: bold;
		font-size: 6px;
		width: 100px;
		color: #66B1FF;
	}
</style>
